<!DOCTYPE html>
<html>

<head>
    {include file="Public/header"}

    <link rel="stylesheet" href="__STATIC__/layout/css/zTreeStyle.css" type="text/css">
    <style>
        .btn {
            background: #fff;
            border: 1px solid #ccc;
            margin-right: 25px
        }

        .btn:nth-of-type(1) {
            margin-left: 15px;
        }

        .btn:hover {
            background: #f4f4f5
        }

        .border_S {
            border-bottom: 1px solid #ccc
        }

        .col-md-4 label {
            width: 120px;
            margin-bottom: 0;
            display: inline-block;
            line-height: 40px;
            border-right: 1px solid #ccc;
            text-align: right;
            padding-right: 10px
        }

        .col-md-4 input {
            margin-left: 15px
        }

        .col-md-4:nth-of-type(2) {
            border: 1px solid #ccc;
            border-top: none;
            border-bottom: none;
        }

        #alertmod_table_list_2 {
            top: 900px !important;
        }

        select {
            width: 150px;
            height: 22px;
        }

        input[type="text"] {
            height: 22px;
            width: 150px
        }

        /*  .quedingbtn button{text-align: center;margin-right: 5px;margin-left: 0}*/
        table {
            border: 1px solid #ccc;
        }

        table {
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc
        }

        table th {
            text-align: center;
            vertical-align: middle;
        }

        table td {
            border-left: 1px solid #ccc;
            border-top: 1px solid #ccc;
            text-align: center;
            vertical-align: middle;
        }

        table tbody {
            background: #fff
        }

        .alert_addNewZone {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.7);
        }

        .alert_addNewZone .alert_addNewZone_content {
            background: #f4f4f5;
            position: fixed;
            top: 50%;
            left: 50%;
            width: 700px;
            height: 450px;
            margin: -220px 0 0 -350px;
            padding: 5px;
            border: 4px solid #ccc /* margin 负值为宽高的一半 */
        }

        h3 {
            font-weight: normal;
            text-align: left;
            line-height: 24px;
            font-size: 20px;
            padding-left: 1%;
            width: 99%;
            margin-bottom: 30px;
            background: #a8c8e8
        }

        .alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form {
            width: 100%;
        }

        .alert_addNewZone_tree {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(255, 255, 255, 0.7);
            z-index: 200
        }

        .alert_addNewZone_tree .alert_addNewZone_content_tree {
            background: #f4f4f5;
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 350px;
            margin: -175px 0 0 -250px;
            padding: 5px;
            border: 4px solid #ccc /* margin 负值为宽高的一半 */
        }

        /**/
        .alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form {
            width: 100%;
        }

        .alert_addNewZone_tree .alert_addNewZone_content_tree .alert_addNewZone_form_tree {
            height: 230px;
            overflow-y: scroll;
        }

        .alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form form {
            width: 100%;
        }

        .alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form form .inputDiv {
            margin-bottom: 30px;
            width: 100%;
            font-size: 14px
        }

        .alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form form .lastChild {
            margin-bottom: 10px;
            font-size: 14px
        }

        .alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form form div label {
            display: inline-block;
            width: 130px;
            text-align: right;
            margin-left: 24%;
        }

        .alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form form div.btn_grp {
            text-align: center;
        }

        .alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form form div:nth-of-type(1) input {
            margin-right: 28px;
        }

        .alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form form div button:hover {
            background: #5bc0de
        }

        /*区省市样式*/
        .alert_zoneTree_content_tree {
            background: #f4f4f5;
            margin: 0;
            padding: 5px;
            border: 4px solid #ccc
        }

        /* .alert_zoneTree_content_tree h3{font-weight: normal;text-align:left;line-height: 24px;font-size: 20px;padding-left: 1%;width: 99%;margin-bottom:10px;background: #d0e0e0}*/
        .alert_zoneTree_content_tree #zoneTree {
            overflow-y: scroll;
        }

        .alert_zoneTree_content_tree #zoneTree #treeDemo2 {
            height: 305px
        }
    </style>
</head>

<body class="gray-bg" style="color:#333;padding:3px;">

<div class="alert_zoneTree_content_tree">
    <div class="alert_addNewZone_form_tree" id="zoneTree">
        <ul id="treeDemo2" class="ztree"></ul>
        <div class="quedingbtn text-center" style="margin:0 auto;">
            <button id="queding">确定</button>
        </div>
    </div>
</div>
<input type="hidden" id="renyuan">
<input type="hidden" id="renyuanname">
<!-- 全局js -->
{include file="Public/footer"}
<!-- <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> -->
<script src="__STATIC__/layout/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- <script src="js/plugins/layer/layer.min.js"></script> -->

<!-- 自定义js -->
<!-- <script src="js/hplus.js?v=4.1.0"></script> -->
<script type="text/javascript" src="__STATIC__/layout/js/contabs.js"></script>
<!-- Peity -->
<script src="__STATIC__/layout/js/plugins/peity/jquery.peity.min.js"></script>

<!-- jqGrid -->
<script src="__STATIC__/layout/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
<script src="__STATIC__/layout/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>

<!-- 自定义js -->
<script src="__STATIC__/layout/js/content.js?v=1.0.0"></script>

<!-- ztree -->
<script type="text/javascript" src="__STATIC__/layout/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="__STATIC__/layout/js/jquery.ztree.excheck.js"></script>
<!-- <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script> -->
<!--统计代码，可删除-->
<script>
    var data = []
    if('{:request()->get("id")}' == 'otherNet'){
        var setting2 = {
            check: {
                enable: true,
                radioType: "all"
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onCheck: emOnCheck
            }
        };
    }else{
        var setting2 = {
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onCheck: emOnCheck
            }
        };
    }

    //树选择
    function emOnCheck(event, treeId, treeNode) {
        if('{:request()->get("id")}' == 'otherNet'){
            if (treeNode.checked == true) {
                data.push({
                    'id':treeNode.id,
                    'title':treeNode.name
                })

            } else {
                for(var i=0;i<data.length;i++){
                    if(data[i].id==treeNode.id){
                        data.splice(i,1);
                    }
                }
            }
        }else{
            if (treeNode.checked == true) {
                $("#renyuan").val(treeNode.id);
                $("#renyuanname").val(treeNode.name);

            } else {
                $("#renyuan").val('');
            }
        }


    };

    $(document).ready(function () {
        $.post('{:url("netTree")}',
            // {keyword: '{:request()->get("keyword")}'},
            {},
            function (data) {
                $.fn.zTree.init($("#treeDemo2"), setting2, data);
            }, 'json');

        $('#queding').on('click', function () {
            if('{:request()->get("id")}' == 'otherNet'){
                for(var i=0;i<data.length;i++){
                    var bool = false
                    parent.$('#selected_net .ren').each(function (idx,o) {
                        if($(this).data('id') == data[i].id){
                            bool = true;
                        }
                    })
                    if(bool == false){
                        parent.$('#selected_net').append('<span class="ren" data-id="'+data[i].id+'">'+data[i].title+'<span class="close">×</span></span>')
                    }
                }
            }else{
                parent.$('#'+'{:request()->get("id")}').val($("#renyuanname").val());
                parent.$('#'+'{:request()->get("id")}'+'_id').val($("#renyuan").val());
            }
            parent.layer.close(parent.layer.getFrameIndex(window.name))
        })
    });
</script>
<script>

</script>
</body>

</html>
